<template>


  <v-container class="custom-container">

    <xy-header-top title='统计报表'>
      <v-btn icon slot="left" small @click="routerBack">
        <v-icon class="white--text">iconfont-icon iconleft</v-icon>
      </v-btn>
    </xy-header-top>






    <v-col>
      <!-- ma-3 pa-6 grey lighten-5-->
      <v-row :align="alignment" :justify="justify">

        <v-card outlined tile flat class="custom-card inventory-card">
          <div>
            <p>入库数量</p>
            <p>23415</p>
          </div>
        </v-card>

        <v-card outlined tile flat class="custom-card total-card">
          <div>
            <p>总库存</p>
            <p>88888</p>
          </div>
        </v-card>

        <v-card outlined tile class="custom-card inventory-trace-card">
          <div>
            <p>出库数量</p>
            <p>42545</p>
          </div>
        </v-card>
      </v-row>

    </v-col>





    <xy-date-picker v-model="form.productionTime" label="生产时间" :rules="rules.productionTime"></xy-date-picker>



    <div style="display:flex;align-items: center;">

      <v-tabs v-model="tab">
        <v-tab>区域</v-tab>
        <v-tab>门店</v-tab>
      </v-tabs>

      <div>top6</div>
      <!-- <v-spacer></v-spacer> -->

    </div>


    <div class="mgt-10">

      <v-tabs-items v-model="tab">

        <v-tab-item>
          <div>
            <v-expansion-panels>
              <v-expansion-panel v-for="(item,i) in 5" :key="i">
                <v-expansion-panel-header>Item</v-expansion-panel-header>
                <v-expansion-panel-content>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
                  et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                  aliquip ex ea commodo consequat.
                </v-expansion-panel-content>
              </v-expansion-panel>
            </v-expansion-panels>
          </div>
        </v-tab-item>

        <v-tab-item>
          <div>


            <v-card flat>
              <v-list flat>
                <v-list-item-group>

                  <v-list-item v-ripple class="border-b" v-for="i in 3" :key="i">

                    <v-list-item-content>

                      <v-list-item-title>
                        <span class="list-index-num">0{{i}}</span>
                        <span class="store-name">火车站总店</span>
                      </v-list-item-title>


                      <div class="data-wrapper">
                        <div>
                          <p class="subtitle">总库存</p>
                          <p class="quantity">10000</p>
                        </div>

                        <div>
                          <p class="subtitle">入库数量</p>
                          <p class="quantity">3000</p>
                        </div>

                        <div>
                          <p class="subtitle">出库数量</p>
                          <p class="quantity">1000</p>
                        </div>
                      </div>

                    </v-list-item-content>

                    <v-list-item-action>
                      <v-icon>iconfont-icon iconxiangyou</v-icon>
                    </v-list-item-action>

                  </v-list-item>


                </v-list-item-group>
              </v-list>
            </v-card>




          </div>
        </v-tab-item>



      </v-tabs-items>
    </div>




  </v-container>
</template>


<script>
  /**
   * 统计报表
   * @author Canaan
   * @date 2019/8/10 18:25.
   */
  import moment from 'moment';
  import xyDatePicker from "../../../views/picker/DatePicker";


  export default {
    name: 'brandReportIndex',
    mounted() {

    },
    components: {
      xyDatePicker,

    },
    props: {},
    data() {
      return {
        alignment: 'center',
        justify: 'center',

        form: {

          productionTime: null

        },


        tab: null,
        items: [
          'Appetizers', 'Entrees', 'Deserts', 'Cocktails',
        ],
        text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',



        rules: {

          productionTime: [
            value => {
              if (!value) {
                return true;
              }
              return moment(value).valueOf() < moment().valueOf() || "时间无效";
            }
          ],


        }
      }
    },
    computed: {},
    methods: {
      routerBack() {
        this.$router.back()
      }
    },
    watch: {},
    filters: {},
    beforeDestroy() {

    }
  }

</script>

<style scoped>
  .custom-container {
    background: #f3f7fd
  }

  .inventory-card {
    color: #c250fc;
    border: 1px solid #c250fc !important;
    background: none !important;
  }

  .total-card {
    background: none !important;
    width: 110px !important;
    height: 110px !important;
    margin: 0 10px !important;
    color: #5c79d6;
    border: 1px solid #5c79d6 !important;

  }

  .inventory-trace-card {
    color: #09a267;
    border: 1px solid #09a267 !important;
    background: none !important;
  }

  .subtitle {
    font-size: 12px;
    text-align: center;
  }

  .quantity {
    text-align: center;
    font-weight: 700;
    font-size: 14px;
  }

  .v-list-item__title {
    margin-bottom: 10px;
    font-size: 0.8rem;
  }

  .v-item-group {
    background: #f3f7fd
  }

  .border-b {
    border-bottom: 1px solid #ddd;
  }

  /* .v-card {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    text-align: center;

    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
  } */

  .custom-card {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
  }

  .v-application p {
    margin-bottom: 0;
  }

  .v-application--is-ltr .v-tabs-bar.v-tabs-bar--is-mobile:not(.v-tabs-bar--show-arrows)>.v-slide-group__wrapper>.v-tabs-bar__content>.v-tab:first-child,
  .v-application--is-ltr .v-tabs-bar.v-tabs-bar--is-mobile:not(.v-tabs-bar--show-arrows)>.v-slide-group__wrapper>.v-tabs-bar__content>.v-tabs-slider-wrapper+.v-tab {
    margin-left: 0px;
  }

  .v-tab {
    padding: 0;
    min-width: 60px;
  }

  .v-list {
    padding: 0;

  }


  .mgt-10 {
    margin-top: 10px;
  }

  .v-list-item {
    padding: 0;
    overflow: hidden;
    border-radius: 6px;
    margin: 10px 0;
    background: #fff;
  }

  .v-list-item__content {
    padding: 0;
  }

  .store-name {
    font-size: 14px;
    font-weight: 700;
    color: #000;
  }

  .list-index-num {
    display: inline-block;
    padding: 6px 8px;
    color: #fff !important;
    background: #c453fe;
    border-bottom-right-radius: 24px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 6px;
    margin-right: 10px;
  }

  /* .list-index-num::after {
    content: "";
    position: absolute;
    background: #c453fe;
    z-index: 0;
    width: 50px;
    height: 50px;
    left: -25px;
    top: -25px;
    border-radius: 24px;
  } */

  .data-wrapper {
    display: flex;
    justify-content: space-between;
    padding: 10px;
  }

</style>
